<template>
    <div class="son11">
        <h3>SonDemo11</h3>
        <h3>对触发事件的参数进行验证（事件校验）</h3>
        <p>tle: {{ tle }}</p>
        <p> user: {{ user }}</p>
        <p>msg: {{ msg }}</p>

        <p>组件可以显式地通过 defineEmits() 宏来声明它要触发的事件
            defineEmits() 宏不能在子函数中使用。如上所示，它必须直接放置在 script setup 的顶级作用域下。</p>
        <button type="button" @click="editTitle">修改title的值</button>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

export interface Iuser {
    name: string
    sex: string
    age: number
}

// 组件可以显式地通过 defineEmits() 宏来声明它要触发的事件
// defineEmits() 宏不能在子函数中使用。如上所示，它必须直接放置在 'script setup' 的顶级作用域下。
// 对触发事件的参数进行验证
// 要为事件添加校验，那么事件可以被赋值为一个函数，接收的参数就是抛出事情时传入emit的内容，返回一个布尔值来表明事件是否合法。
const emit = defineEmits({
    submit(payload: { email: string; password: string }) {
        // 通过返回值为 true 还是 false 来判断 验证是否通过
        if (payload.email === payload.password) {
            return true
        }
        return false
    },
    sunmit2(payload: { email: string, password: string }) {
        return true
    }
})

const {
    title = '子组件默认的标题',
    user,
    msg
} = defineProps<{
    title?: string
    user: Iuser
    msg?: string
}>()

const tle = ref(title)

const editTitle = () => {
    tle.value = 'son11的新标题'
    emit('submit', { email: '22', password: '22' })
}

</script>

<style lang="scss" scoped>
.son11 {
    border: 3px solid rgb(6, 164, 6);
    padding: 10px;
    margin: 10px;
}
</style>